import type { Metadata } from 'next';
import Link from 'next/link';
import { AdminTitle, JsonPre, KindChip, Mono, Notice, StatusChip } from '@/components/admin/ui';
import { SectionNav } from '@/components/layout/terminal';
import { EntityBadge, TierBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { Note } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import type { ExtractionPayload, ExtractionSpan } from '@/lib/admin/types';
import { cn } from '@/lib/cn';
import { fmtBytes, fmtDateTime, fmtInt, fmtValue, num } from '@/lib/format';
import { routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Extraction debugger', robots: { index: false, follow: false } };
export const dynamic = 'force-dynamic';

const STAGES = [
  { id: 'raw', label: 'Raw' },
  { id: 'normalized', label: 'Normalized' },
  { id: 'deterministic', label: 'Deterministic' },
  { id: 'llm', label: 'LLM' },
  { id: 'candidates', label: 'Candidates' },
  { id: 'claims', label: 'Claims' },
  { id: 'relations', label: 'Relations' },
  { id: 'reconciliation', label: 'Reconciliation' },
  { id: 'events', label: 'Events' },
];

/** Text excerpt with the located claim values highlighted (offsets are into the cleaned text). */
function HighlightedText({ text, spans }: { text: string; spans: ExtractionSpan[] }) {
  const found = spans.filter((s) => s.found && typeof s.offset === 'number' && s.offset >= 0 && s.offset < text.length && s.match).sort((a, b) => (a.offset ?? 0) - (b.offset ?? 0));
  const parts: React.ReactNode[] = [];
  let cursor = 0;
  for (const s of found) {
    const start = s.offset as number;
    const len = (s.match as string).length;
    if (start < cursor) continue;
    parts.push(text.slice(cursor, start));
    parts.push(
      <mark key={s.claim_id} id={`span-${s.claim_id}`} className="rounded-[2px] bg-accent-soft px-0.5 text-ink outline outline-1 outline-accent/40" title={`${s.property} = ${fmtValue(s.value, s.property)}`}>
        {text.slice(start, start + len)}
      </mark>,
    );
    cursor = start + len;
  }
  parts.push(text.slice(cursor));
  return <>{parts}</>;
}

function Stage({ id, title, count, children, lede }: { id: string; title: string; count?: number | null; children: React.ReactNode; lede?: string }) {
  return (
    <section id={id} className="scroll-mt-24 border-t border-rule py-5">
      <h2 className="text-base font-semibold tracking-tight">
        {title} {count !== undefined && <span className="tnum text-sm font-normal text-ink-3">{fmtInt(count)}</span>}
      </h2>
      {lede && <p className="mt-0.5 text-xs text-ink-3">{lede}</p>}
      <div className="mt-3">{children}</div>
    </section>
  );
}

function ClaimsTable({ claims, spans, caption }: { claims: ExtractionPayload['claims']; spans: ExtractionSpan[]; caption: string }) {
  const spanById = new Map(spans.map((s) => [s.claim_id, s]));
  return (
    <DataTable compact scroll caption={caption}>
      <thead>
        <tr>
          <Th>Entity</Th>
          <Th>Property</Th>
          <Th>Value</Th>
          <Th>Raw</Th>
          <Th>Status</Th>
          <Th>Conf.</Th>
          <Th>Tier</Th>
          <Th>Located in text</Th>
          <Th>Claim</Th>
        </tr>
      </thead>
      <tbody>
        {claims.length === 0 && <EmptyRow cols={9}>No claims at this stage.</EmptyRow>}
        {claims.map((c) => {
          const s = spanById.get(c.id);
          return (
            <tr key={c.id}>
              <Td primary>{c.entity_slug ? <Link href={routes.entity({ entity_type: 'model', slug: c.entity_slug })} className="text-ink hover:text-accent">{c.entity_slug}</Link> : <Mono>{c.entity_id ?? '—'}</Mono>}</Td>
              <Td>
                <Mono>{c.property}</Mono>
              </Td>
              <Td className="tnum text-xs">{fmtValue(c.value, c.property)}{c.unit ? <span className="text-ink-3"> {c.unit}</span> : null}</Td>
              <Td className="text-xs text-ink-3">{c.value_raw === null || c.value_raw === undefined ? '—' : String(c.value_raw)}</Td>
              <Td>
                <StatusChip value={c.status} />
              </Td>
              <Td className="text-xs text-ink-2">{c.confidence}</Td>
              <Td>
                <TierBadge tier={num(c.tier)} />
              </Td>
              <Td className="text-xs">
                {s?.found ? (
                  <a href={`#span-${c.id}`} className="text-positive hover:underline">
                    found @ {s.offset}
                  </a>
                ) : s ? (
                  <span className="text-warning" title={s.tried?.length ? `tried: ${s.tried.join(', ')}` : undefined}>
                    not found
                  </span>
                ) : (
                  <span className="text-ink-3">—</span>
                )}
              </Td>
              <Td>
                <Link href={routes.claim(c.id)} className="mono text-[11px] text-accent hover:underline">
                  {c.id}
                </Link>
              </Td>
            </tr>
          );
        })}
      </tbody>
    </DataTable>
  );
}

export default async function ExtractionPage({ params, searchParams }: { params: Promise<{ snapshot: string }>; searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const { snapshot } = await params;
  const sp = await searchParams;
  const res = await load(adminApi.extraction(snapshot, 20000));
  if (!res.ok) {
    return (
      <>
        <AdminTitle title="Extraction debugger" />
        <Unavailable what="Extraction" reason={res.error} />
      </>
    );
  }
  const x = res.data;
  const det = x.claims.filter((c) => c.extractor !== 'llm');
  const llm = x.claims.filter((c) => c.extractor === 'llm');
  const text = x.text ?? '';
  return (
    <>
      <AdminTitle title="Extraction debugger" count={<Mono>{x.id}</Mono>} lede="The pipeline for one snapshot: raw fetch → cleaned text → deterministic claims → LLM claims → entity candidates → claims written → relations → reconciliation with the previous snapshot → events. Value locations are a best-effort search in the text; not-found is reported, never inferred.">
        <Link href={`/admin/snapshots/${encodeURIComponent(x.id)}`} className="text-xs text-ink-3 hover:text-ink">
          Snapshot record →
        </Link>
        {x.document_id && (
          <Link href={`/admin/documents/${encodeURIComponent(x.document_id)}`} className="text-xs text-ink-3 hover:text-ink">
            Document →
          </Link>
        )}
      </AdminTitle>
      <Notice notice={sp.notice} level={sp.level} />
      <SectionNav items={STAGES} className="mb-2" />

      <Stage id="raw" title="RAW" lede="What was fetched (paths are never exposed).">
        <dl className="kv [&>div]:py-1 text-sm">
          <div>
            <dt>URL</dt>
            <dd>
              <a href={x.final_url ?? x.url} target="_blank" rel="noopener noreferrer" className="link break-all text-xs">
                {x.final_url ?? x.url}
              </a>
            </dd>
          </div>
          <div>
            <dt>Observed</dt>
            <dd className="tnum">{fmtDateTime(x.observed_at)}</dd>
          </div>
          <div>
            <dt>HTTP · type · size</dt>
            <dd className="tnum">
              {fmtValue(x.http_status)} · {x.content_type ?? '—'} · {fmtBytes(x.byte_size)}
            </dd>
          </div>
          <div>
            <dt>Hashes</dt>
            <dd>
              <Mono>content {x.content_hash?.slice(0, 16) ?? '—'}</Mono> <Mono>text {x.text_hash?.slice(0, 16) ?? '—'}</Mono>
            </dd>
          </div>
          <div>
            <dt>Connector · parser · transport</dt>
            <dd>
              <Mono>{x.connector_name ?? '—'}</Mono> <Mono>parser v{x.parser_version ?? '—'}</Mono> <Mono>{x.transport ?? '—'}</Mono>
            </dd>
          </div>
          <div>
            <dt>Run · document</dt>
            <dd>
              <Mono>{x.run_id ?? '—'}</Mono> · <Mono>{x.document_id}</Mono> {x.doc_type && <KindChip value={x.doc_type} />}
            </dd>
          </div>
          <div>
            <dt>Entity</dt>
            <dd>
              {x.entity_slug ? (
                <span className="inline-flex items-center gap-1.5">
                  <EntityBadge type="model" small />
                  <Link href={routes.entity({ entity_type: 'model', slug: x.entity_slug })} className="text-ink hover:text-accent">
                    {x.entity_name ?? x.entity_slug}
                  </Link>
                </span>
              ) : (
                '—'
              )}
            </dd>
          </div>
          <div>
            <dt>Flags</dt>
            <dd className="text-xs">
              raw {x.has_raw ? 'archived' : '—'} · text {x.has_text ? 'yes' : '—'} · structured {x.has_structured || x.structured ? 'yes' : '—'} · changed {x.changed ? 'yes' : 'no'} · <StatusChip value={x.processing_status} />
            </dd>
          </div>
        </dl>
        {x.structured != null && (
          <details className="mt-3">
            <summary className="cursor-pointer text-xs text-ink-3 hover:text-ink">Structured data (JSON-LD, OG, embedded JSON)</summary>
            <JsonPre value={x.structured} maxHeight="20rem" />
          </details>
        )}
      </Stage>

      <Stage id="normalized" title="NORMALIZED" count={num(x.text_chars)} lede={`Cleaned text${x.text_truncated ? ' (excerpt — truncated to 20 kB)' : ''}; ${fmtInt(x.spans_found)} of ${fmtInt(x.spans.length)} claim values located and highlighted.`}>
        {text ? (
          <pre className="scrollbar-thin max-h-[32rem] overflow-auto whitespace-pre-wrap border border-rule bg-surface p-3 text-[12px] leading-relaxed text-ink-2" data-extraction-text>
            <HighlightedText text={text} spans={x.spans} />
          </pre>
        ) : (
          <p className="text-sm text-ink-3">No cleaned text{x.text_error ? ` — ${x.text_error}` : ''}.</p>
        )}
      </Stage>

      <Stage id="deterministic" title="DETERMINISTIC" count={det.length} lede="Rule-based extraction (tables, JSON-LD, meta, regex) — always runs first.">
        <ClaimsTable claims={det} spans={x.spans} caption="Deterministic claims" />
      </Stage>

      <Stage id="llm" title="LLM" count={llm.length + x.llm_jobs.length} lede="LLM jobs for this snapshot and the claims they produced (one tier lower than deterministic).">
        {x.llm_jobs.length > 0 && <JsonPre value={x.llm_jobs} maxHeight="14rem" />}
        {x.llm_jobs.length === 0 && llm.length === 0 ? <p className="text-sm text-ink-3">No LLM extraction for this snapshot (deterministic only).</p> : <ClaimsTable claims={llm} spans={x.spans} caption="LLM claims" />}
      </Stage>

      <Stage id="candidates" title="CANDIDATES" count={x.entity_candidates.length} lede="Entities the resolver matched or created for this document.">
        <DataTable compact caption="Entity candidates">
          <thead>
            <tr>
              <Th>Entity</Th>
              <Th>Type</Th>
              <Th>Identity</Th>
              <Th>Merged into</Th>
              <Th>Id</Th>
            </tr>
          </thead>
          <tbody>
            {x.entity_candidates.length === 0 && <EmptyRow cols={5}>No candidate.</EmptyRow>}
            {x.entity_candidates.map((c) => (
              <tr key={c.id}>
                <Td primary>
                  <Link href={routes.entity({ entity_type: c.entity_type, slug: c.slug })} className="text-ink hover:text-accent">
                    {c.canonical_name}
                  </Link>
                </Td>
                <Td>
                  <EntityBadge type={c.entity_type} small />
                </Td>
                <Td className="text-xs text-ink-2">{c.identity_confidence ?? '—'}</Td>
                <Td>{c.merged_into ? <Mono>{c.merged_into}</Mono> : <span className="text-ink-3">—</span>}</Td>
                <Td>
                  <Mono>{c.id}</Mono>
                </Td>
              </tr>
            ))}
          </tbody>
        </DataTable>
      </Stage>

      <Stage id="claims" title="CLAIMS" count={x.claims.length} lede="Every claim written from this snapshot, with its status after the writer's temporal rules.">
        <ClaimsTable claims={x.claims} spans={x.spans} caption="All claims" />
        {(x.results.length > 0 || x.prices.length > 0) && (
          <div className="mt-4 grid gap-4 md:grid-cols-2">
            <div>
              <p className="eyebrow mb-1">Benchmark results {fmtInt(x.results.length)}</p>
              <JsonPre value={x.results} maxHeight="14rem" />
            </div>
            <div>
              <p className="eyebrow mb-1">Prices {fmtInt(x.prices.length)}</p>
              <JsonPre value={x.prices} maxHeight="14rem" />
            </div>
          </div>
        )}
      </Stage>

      <Stage id="relations" title="RELATIONS" count={x.relations.length}>
        {x.relations.length ? <JsonPre value={x.relations} maxHeight="18rem" /> : <p className="text-sm text-ink-3">No relation written from this snapshot.</p>}
      </Stage>

      <Stage id="reconciliation" title="RECONCILIATION" lede="Against the previous snapshot of the same document: what changed, and how the writer treated each claim (confirm / supersede / conflict).">
        {x.previous_snapshot ? (
          <dl className="kv [&>div]:py-1 text-sm">
            <div>
              <dt>Previous snapshot</dt>
              <dd>
                <Link href={`/admin/extractions/${encodeURIComponent(x.previous_snapshot.id)}`} className="mono text-xs text-accent hover:underline">
                  {x.previous_snapshot.id}
                </Link>{' '}
                <span className="tnum text-xs text-ink-3">{fmtDateTime(x.previous_snapshot.observed_at)}</span>
              </dd>
            </div>
            <div>
              <dt>Content changed</dt>
              <dd className="text-xs">{x.previous_snapshot.content_hash && x.content_hash ? (x.previous_snapshot.content_hash === x.content_hash ? 'no (same hash)' : 'yes (hash differs)') : '—'}</dd>
            </div>
            <div>
              <dt>Claim outcomes</dt>
              <dd className="text-xs">
                {['current', 'superseded', 'conflicting', 'retracted'].map((s) => (
                  <span key={s} className={cn('mr-3 tnum', s === 'conflicting' && x.claims.some((c) => c.status === s) && 'text-danger')}>
                    {s} {fmtInt(x.claims.filter((c) => c.status === s).length)}
                  </span>
                ))}
              </dd>
            </div>
          </dl>
        ) : (
          <p className="text-sm text-ink-3">First snapshot of this document — nothing to reconcile against.</p>
        )}
        {x.diff != null && (
          <details className="mt-3">
            <summary className="cursor-pointer text-xs text-ink-3 hover:text-ink">Diff payload</summary>
            <JsonPre value={x.diff} maxHeight="18rem" />
          </details>
        )}
      </Stage>

      <Stage id="events" title="EVENTS" count={x.events.length} lede="Change events emitted by this snapshot (material properties only).">
        {x.events.length ? <JsonPre value={x.events} maxHeight="18rem" /> : <p className="text-sm text-ink-3">No event emitted.</p>}
      </Stage>
      {x.note && <Note className="mt-4">{x.note}</Note>}
    </>
  );
}